<template>
  <view class="login-body">
    <view class="login-logo"></view>
    <view class="text">点击下方按钮，登录获取手机号 解锁更多权益</view>
    <view>
      <button
        @click="test"
        open-type="getPhoneNumber"
        @getphonenumber="onGetphoneNumber"
        hover-class="none"
        class="btn flex flex-center"
      >
        登录
      </button>
    </view>
  </view>
</template>

<script setup>
import { useStore } from 'vuex'
const store = useStore();
async function onGetphoneNumber(event) {
  const code = event.detail.code
  try {
    await store.dispatch('user/userLogin', { code });
  } finally {

  }
}
</script>

<style lang="scss" scoped>
.login-body{
  background: url(https://oss.cqxzx.com/8610e97095bb72a462f4b8feee7b7a18.png?Expires=2036752454&OSSAccessKeyId=LTAI5t5a98jUcHvqdxwzahgm&Signature=bmqZKrY%2BlpbYKewo9f3b%2FDkSi2U%3D);
  background-size: contain;
  width: 600rpx;
  height: 430rpx;
  position: relative;
  padding: 116rpx 60rpx 72rpx 60rpx;
  .login-logo{
    position: absolute;
    top: 0;
    left: 50%;
    width: 136rpx;
    height: 136rpx;
    transform: translate(-50%, -50%);
    background: url(https://oss.cqxzx.com/8d6cdeb8ae37c056113b300f5dd44c80.png?Expires=2036752497&OSSAccessKeyId=LTAI5t5a98jUcHvqdxwzahgm&Signature=mB5UmLP9DX2UWWOPDtekVFg%2BAuc%3D);
    background-size: contain;
  }
  .text{
    font-weight: 500;
    font-size: 32rpx;
    color: #0F2770;
    line-height: 48rpx;
    text-align: center;
    margin-bottom: 48rpx;
  }
  .btn{
    height: 98rpx;
    background: #FF8F1F;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    font-weight: 500;
    font-size: 28rpx;
    color: #FFFFFF;
  }
}
</style>
